<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index02-选择器</title>
</head>
<body>
<div id="app">
  Hello1
</div>
<div id="app2" class="aaa">
  Hello2
</div>
<div class="aaa">
  Hello3
</div>
<div class="aaa">
  Hello4
</div>
<div class="bbb">
  Hello5
</div>
<p>Hello6</p>
<h1>Hello7</h1>
<div id="app3">
    <div>
        Hello3-1
    </div>
    <div id="second">
        <div>
            Hello3-2-1
        </div>
        <div>
            Hello3-2-2
        </div>
        <div>
            Hello3-2-3
        </div>
    </div>
    <div>
        Hello3-3
    </div>
    <div>
        Hello3-4
    </div>
</div>
<script type="text/javascript" src="../scripts/jquery-3.7.0.js"></script>
<script type="text/javascript">

  // 当页面加载完成触发执行
  $(function(){
    // 页面加载完成，这里会执行
    // id选择器（#id）
    // console.log($("#app"));
    // 元素名称选择器(element)
    // console.log($("div"));
    // 类选择器(.class)
    // css()通过jquery对象来设置设置样式
    // $(".aaa").css('color', 'red');
    // $(".aaa").css({
    //   "color": "red",
    //   "font-size": "30px"
    // });
    // 选择所有元素(*)
    // console.log($("*"));
    // 组合选择元素(selector1,selector2,...)
    // $(".bbb,p,h1").css("color","red");
    //   后代选择器	$("#parent div")	选择id为parent的元素的所有div元素
    //   console.log($("#app3 div"));
      //   子代选择器	$("#parent>div")	选择id为parent的直接div子元素
      // console.log($("#app3 > div"));
      //   相邻选择器	$(".blue + img")	选择css类为blue的下一个img元素
      // console.log($("#second + div"));
      //   同辈选择器	$(".blue ~ img")
      console.log($("#second ~ div"));

  });

</script>
</body>
</html>